<!-- 题库管理功能介绍 -->
<template>
  <div>
    <div class="left">
      <template>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree
          class="filter-tree"
          :data="data"
          node-key="key"
          :props="defaultProps"
          :filter-node-method="filterNode"
          ref="tree"
          highlight-current
          check-on-click-node
          @node-click="pickDown"
        >
        </el-tree>
      </template>
    </div>
    <div class="right">
      题目题干：<el-input
        placeholder="请输入题干"
        v-model="input"
        clearable
        style="width: 300px"
      >
      </el-input
      >&nbsp; 题目类型：<el-select
        v-model="value1"
        clearable
        placeholder="题目类型"
        style="width: 130px"
      >
        <el-option
          v-for="item in options1"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option> </el-select
      >&nbsp; 题目难度：<el-select
        v-model="value2"
        clearable
        placeholder="题目难度"
        style="width: 130px"
      >
        <el-option
          v-for="item in options2"
          :key="item.id"
          :label="item.hardLevel"
          :value="item.id"
        >
        </el-option>
      </el-select>

      <br />
      <br />
      <el-row>
        <el-button type="primary" @click="addQuestionOne()">新增</el-button>
        <el-button type="primary" plain @click="deletes">批量删除</el-button>
        <el-button type="primary" round @click="search">查询</el-button>
        <el-button type="primary" round plain @click="reset()">重置</el-button>
      </el-row>
      <br />
      <!-- 表格 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
        ref="listRef"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="selection" width="50" align="center">
        </el-table-column>
        <el-table-column
          label="序号"
          width="60"
          type="index"
          :index="indexMethod"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="title" label="题干"> </el-table-column>
        <el-table-column
          prop="quTypeId"
          label="题目类型"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.quTypeId == item.id"
              v-for="item in options1"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</span
            >
            <!-- <span v-if="scope.row.quTypeId == 2">多选题</span>
            <span v-if="scope.row.quTypeId == 3">判断题</span>
            <span v-if="scope.row.quTypeId == 4">填空题</span>
            <span v-if="scope.row.quTypeId == 5">问答题</span> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="complexity"
          label="难度"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.complexity == item.id"
              v-for="item in options2"
              :key="item.id"
              :value="item.id"
              >{{ item.hardLevel }}</span
            >
            <!-- <span v-if="scope.row.complexity == 2">普通</span>
            <span v-if="scope.row.complexity == 3">困难</span> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="130">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="updateOne(scope.row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="deleteOne(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 题目详情查看 -->
      <el-dialog title="查看题目" :visible.sync="dialogVisible" width="50%">
        <el-descriptions title="题目信息" :column="1" :colon="false">
          <el-descriptions-item label="题干">{{
            this.dataDialog.title
          }}</el-descriptions-item>
          <el-descriptions-item
            v-if="this.dataDialog.choiceAnswerLists.length != 0"
          >
          </el-descriptions-item>

          <el-descriptions-item
            v-for="(item, index) in this.dataDialog.choiceAnswerLists"
            :key="index"
            :label="item.options"
          >
            <span>
              {{ item.optionContent }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="答案">
            <el-tag size="small">{{ this.dataDialog.answer }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            <el-tag size="small">
              {{ this.dataNew.quTypeName }}
            </el-tag>

            <el-tag size="small">{{ this.dataNew.complexityName }}</el-tag>
            <el-tag size="small">{{ this.dataNew.fName }}</el-tag>
            <el-tag size="small">{{ this.dataNew.categotyName }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="答案解析" colon="false">
            {{ this.dataDialog.analysis }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span> -->
      </el-dialog>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
  </div>
</template>
<style>
.left {
  width: 15%;
  margin: 0 20px;
  display: inline-block;
  /* float: left; */
  vertical-align: text-top;
}
.right {
  vertical-align: text-top;
  display: inline-block;
  /* float: right; */
  width: 75%;
  padding-left: 25px;
  border-left: 1px solid rgb(219, 218, 218);
  /* height: 500px; */
}
</style>
<script>
import dropDown from "../common/dropDown.vue";
import Pagination from "../common/Pagination.vue";
export default {
  data() {
    return {
      //菜单相关
      filterText: "",
      //菜单数据，也是分类的数据
      data: [],
      defaultProps: {
        children: "menus",
        label: "name",
      },
      //搜索题干，题目类型和难度
      input: "",
      options1: [],
      value1: "",
      options2: [],
      value2: "",
      //表格数据
      tableData: [],

      formInline: {
        page: 1,
        limit: 5,
      },
      question: {
        title: "",
        quTypeId: 0,
        titlecategoryId: 0,
        complexity: 0,
        fid: 0,
        quesstionIds: [],
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 10,
      },
      //弹出框
      dialogVisible: false,
      //弹出框的数据
      dataDialog: {
        answer: "",
        complexity: "",
        id: "",
        fid: "",
        isdelete: "",
        quTypeId: "",
        title: "",
        titlecategoryId: "",
        choiceAnswerLists: [
          { id: "", optionContext: "", options: "", quesId: "" },
        ],
        analysis: "空",
      },
      //为了不改变之前的渲染数据，新建一个类型，难度，
      dataNew: {
        quTypeName: "",
        complexityName: "",
        fName: "",
        categotyName: "",
      },
    };
  },
  components: { dropDown, Pagination },
  created() {
    //菜单
    this.findAll();
    //查询所有题目
    this.showAll();
    //查询类型列表
    this.selectQuestionTypes();
    //查询难度列表
    this.selectQuestionHardLevel();
  },
  methods: {
    //批量删除
    deletes() {
      let Ids = [];
      this.$refs.listRef.selection.forEach((e) => {
        Ids.push(e.id);
      });
      this.question.quesstionIds = Ids;
      this.$axios
        .post("/api/titleController/delete", this.question)
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.selectByType();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "info",
              message: "删除失败",
            });
          }
        })
        .catch(() => {});
    },

    //新增试题
    addQuestionOne() {
      // this.$router.push({ path: "/addQuestionOne" });
      this.$router.push({
        name: "addQuestionOne", //路由配置中的name
        params: {
          type: 1,
        },
      });
    },
    //修改试题
    updateOne(s) {
      console.log(s);
      // this.$router.push({path: '/addQuestionOne/',params:{data:1} })
      this.$router.push({
        name: "addQuestionOne", //路由配置中的name
        params: {
          type: 2,
          s,
        },
      });
    },

    //删除一个
    deleteOne(data) {
      //console.log(data);
      this.$axios
        .delete("/api/titleController/deleteOne/" + data.id)
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.selectByType();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "info",
              message: "删除失败",
            });
          }
        })
        .catch(() => {});
    },
    //查询
    search() {
      // alert("查询")
      this.question.title = this.input;
      this.question.quTypeId = this.value1;
      this.question.complexity = this.value2;
      // console.log(this.question);
      this.$axios
        .post(
          "/api/titleController/findLike/" +
            this.pageparm.currentPage +
            "/" +
            this.pageparm.pageSize,
          this.question
        )
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data.list;
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page;
          this.pageparm.pageSize = this.formInline.limit;
          this.pageparm.total = res.data.data.total;
        })
        .catch(() => {});
    },
    //重置
    reset() {
      this.input = "";
      this.value1 = "";
      this.value2 = "";
      this.question.title = this.input;
      this.question.quTypeId = this.value1;
      this.question.complexity = this.value2;
      this.question.titlecategoryId = 0;
      this.question.fid = 0;
      // this.getAllNodeKey(this.data, false);
      this.findAll();//重查一次菜单，就收起菜单了
      this.showAll();
    },
    //让树形控件收起
    // getAllNodeKey(data, state) {
    //   // console.log(data, "222");
    //   data.forEach((item) => {
    //     if (item.children) {
    //       this.$refs.tree.store.nodesMap[item.key].expanded = state;
    //       this.getAllNodeKey(item.children, state);
    //     }
    //   });
    // },
    //展式所有题目
    showAll() {
      this.$axios
        .get(
          "/api/titleController/showAll/" +
            this.pageparm.currentPage +
            "/" +
            this.pageparm.pageSize
        )
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data.list;
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page;
          this.pageparm.pageSize = this.formInline.limit;
          this.pageparm.total = res.data.data.total;
          //   console.log(this.data);
        })
        .catch(() => {});
    },
    //序号处理
    indexMethod(index) {
      return (
        (this.pageparm.currentPage - 1) * this.pageparm.pageSize + index + 1
      );
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.pageparm.currentPage = this.formInline.page;
      this.pageparm.pageSize = this.formInline.limit;
      // console.log(this.question);
      this.selectByType();
    },
    //判断切换页码时，是什么查询法
    selectByType() {
      if (
        this.question.title == "" &&
        this.question.quTypeId == 0 &&
        this.question.titlecategoryId == 0 &&
        this.question.complexity == 0 &&
        this.question.fid == 0
      ) {
        this.showAll();
      } else {
        this.search();
      }
    },
    //查询类型表
    selectQuestionTypes() {
      this.$axios
        .get("/api/questionTypesController/find")
        .then((res) => {
          // console.log(res);
          this.options1 = res.data.data;
          // console.log(this.options1);
        })
        .catch(() => {});
    },
    //查询难度表
    selectQuestionHardLevel() {
      this.$axios
        .get("/api/questionHardLevelController/find")
        .then((res) => {
          // console.log(res);
          this.options2 = res.data.data;
          // console.log(this.options2);
        })
        .catch(() => {});
    },

    //查看详情
    handleClick(data) {
      console.log(data);
      this.dataDialog = data;
      this.dialogVisible = true;
      if (this.dataDialog.analysis == "" || this.dataDialog.analysis == null) {
        this.dataDialog.analysis = "暂无";
      }
      //遍历options1,得到题目类型
      for (let index = 0; index < this.options1.length; index++) {
        const element = this.options1[index];
        // console.log(element);
        if (this.dataDialog.quTypeId == element.id) {
          this.dataNew.quTypeName = element.name;
        }
      }
      //遍历option2，得到难度类型
      for (let index = 0; index < this.options2.length; index++) {
        const element = this.options2[index];
        // console.log(element);
        if (this.dataDialog.complexity == element.id) {
          this.dataNew.complexityName = element.hardLevel;
        }
      }
      // console.log(this.dataDialog);
      for (let index = 0; index < this.data.length; index++) {
        const element = this.data[index];
        // console.log(element);
        for (let index2 = 0; index2 < element.menus.length; index2++) {
          const element2 = element.menus[index2];
          // console.log(element2);
          if (this.dataDialog.titlecategoryId == element2.id) {
            // alert(element2.id);
            this.dataNew.categotyName = element2.name;
            this.dataNew.fName = element.name;
            break;
          }
        }
      }
      // this.dataDialog.complexity;
      // console.log(this.tableData);
      // console.log(this.dataDialog);
    },
    //菜单
    findAll() {
      //console.log("你好");
      //发送axios拿取菜单
      this.$axios
        .get("/api/examMenu/findAll")
        .then((res) => {
          //   console.log(res);
          //赋值给data
          this.data = res.data.data;
          //   console.log(this.data);
        })
        .catch(() => {});
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //菜单节点被选中
    pickDown(data, Node) {
      this.question.titlecategoryId = 0;
      this.question.fid = 0;
      // console.log(data);
      if (data.menus.length == 0) {
        // alert("不是父")
        this.question.titlecategoryId = data.id;
      } else {
        this.question.fid = data.id;
      }
      // console.log(this.question.titlecategoryId + "..." + this.question.fid);
      //查询一下
      this.search();
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>